<template>
  <view class="content">
    <NavBar title="費用明細" :autoBack="false" id="nav">
      <template #left>
        <view class="navbar-left center" @click="goBack">
          <u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
        </view>
      </template>
    </NavBar>
    <view class="total">
      <view class="total_box">
        <view class="name">{{ total.case_name }}</view>
        <view>{{ total.today }}</view>
      </view>
      <view class="total_box">
        <view>{{ total.start_time }}至{{ total.end }}</view>
        
      </view>
      <view class="txt-right">
        總費用：<span class="s1">{{ total.total_cost }}</span></view
        >
    </view>
    <view class="list">
      <view v-for="(item, index) in detail_list" class="list_box" :key="index">
        <view class="list_each_fir list_each">
          <text class="name">
            <text>{{ item.casezy_name }}</text>
            -
            <text>{{ item.task_name }}</text>
            <text>{{ item.time }}</text>
          </text>
          <text class="right"> 
            <text class="t1">
              費用： 
            </text>
            <text class="t2"> {{ item.cast_price_str }}</text>
          </text>
        </view>
        <view class="list_each">
          <text class="t1">記錄時間：</text>
          <text>{{ item.inputtime }}</text>
        </view>
        <view class="list_each">
          <text class="t1">描述：</text>
          <text>{{ item.detail }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import NavBar from '@/component/NavBar'
import {
  getCaseCostList,
} from '@/api/apis.js'
export default {
  name: 'costDetails',
  components: {
    NavBar,
  },
  data() {
    return {
      id:'',
      total: {
        total_cost: '-',
        today: '-',
        case_name: '-',
        start_time: '-',
        end: '-',
      },
      detail_list: [],
      list: [],
    }
  },
  onLoad() {
			if (!uni.getStorageSync("islogin")) {
				this.$Toast("請先登錄")
				setTimeout(() => {
					this.toPage("Home")
				}, 1200)
			} else {
				const {
					id,
				} = this.$Route.query
				this.id = id
        if(this.id){
          this.getDetail()
        }
			}
		},
  methods: {
    goBack() {
      uni.navigateBack(-1)
    },
    // 获取费用详情
    getDetail() {
      let uid = uni.getStorageSync('uid')
      getCaseCostList({
        id: this.id,
        uid,
      }).then((res) => {
        console.log(res)
        this.detail_list = res.detail_list
        this.total = res.total
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 24rpx;
  overflow: hidden;
  .total {
    background-color: #f5f7fa;
    margin-top: 88rpx;
    padding: 24rpx;
    border-radius: 8rpx;
    .total_box {
      display: flex;
      justify-content: space-between;
      .name {
        font-size: 18px;
        font-weight: bold;
        max-width: 50;
      }
      .s1 {
        font-weight: bold;
      }
    }
    .txt-right{
      text-align: right;
    }
  }
  .list {
    margin-top: 24rpx;
    .name {
      font-weight: bold;
      fon-size: 18px;
      color: #000;
    }
    .list_box {
      border: 1px solid #e5e5e5;
      margin-bottom: 24rpx;
      padding: 24rpx;
      border-radius: 8rpx;
    }
    .list_each_fir {
      display: flex;
      justify-content: space-between;
    }
    .list_each {
      line-height: 44rpx;
      color: #666;
      .right{
        min-width: 150px;
      }
      .t1 {
        color: #000;
      }
      .t2{
        color: #ffd33b;
      }
    }
    // .list_box {
    //   display: flex;
    //   align-items: center;
    // }
  }
}
</style>
